<!--
 * @FileDescription 发动机系统
 * @Author lz
 * @Date 20230801 16:27:17
 * @LastEditors lz
 * @LastEditTime 20230801 16:27:17
-->
<template>
    <div class="ENGINE_wp">
        <Hdr></Hdr>
        <img src="/images/Benz600/ic_back.png" class="return_ico" @click="ret">

        <div class="ActionBar">
            <span @click="SwitchBtn" class="swBtn">切换</span>
            <span @click="isShow" class="isShowBtn">标签</span>
            <div class="fb_l" @click="VLQR"></div>
            <div class="fb_r" @click="OPQR"></div>
            <!-- <div class="EP" @click="DZZC"></div> -->
            <!-- <div class="GP">
                <img src="/images/Benz600/P.png" v-if="state.current == 'P'" class="GPImg">
                <img src="/images/Benz600/N.png" v-if="state.current == 'N'" class="GPImg">
                <img src="/images/Benz600/D.png" v-if="state.current == 'D'" class="GPImg">
                <img src="/images/Benz600/R.png" v-if="state.current == 'R'" class="GPImg">
            </div> -->

            <img class="ST" :src="`/images/Benz600/ic_未启动.png`" v-show="STOP" @click="YJQD">
            <img class="ST" :src="`/images/Benz600/ic_一键启动.png`" v-show="!STOP" @click="YJQD">
            

            <div class="AP"></div>
            <div class="numericalValue">
                <el-slider v-model="value1" @change="val1" />
            </div>
            <div class="numericalValue2">
                <el-slider v-model="value2" @change="val2" />
            </div>
            <div class="BP"></div>
            <!-- <div class="SAL" @click="SAL"></div>
            <div class="SAR" @click="SAR"></div> -->
            <!-- 文本 -->
            <!-- <div class="buttonText t1">
                电子驻车
            </div>
            <div class="buttonText t2">
                挡位
            </div> -->
            <div class="buttonText t3">
                一键启动
            </div>
            <div class="buttonText t4">
                加速踏板
            </div>
            <div class="buttonText t5">
                制动踏板
            </div>
        </div>
        <VideoList v-if="HomeContent.Default.VideoList.value"></VideoList>

        <!-- 系统介绍 -->
        <div class="introduce" v-if="isShowIntroduce">
            <div class="close" @click="closeIntroduce"></div>
            <div class="title">系统介绍</div>
            <div class="content">
                奔驰v12发动机是一款采用V型12缸结构的高性能发动机，它拥有强大的动力输出和卓越的驾驶体验。其主要技术特点如下：
                1. 强大的动力输出
                奔驰v12发动机采用双涡轮增压技术，最大输出功率可达630马力，最大扭矩可达1000牛·米，动力十分强劲。同时，该发动机还采用了可变气门正时和可变气门升程技术，使得发动机在低速和高速工况下均能保持出色的动力输出。
                2. 高效的燃油经济性
                奔驰v12发动机采用了直喷技术和启停系统，使得其燃油经济性得到了极大的提升。根据实测数据，该发动机的综合油耗仅为11.9升/100公里，相比其他同级别发动机具有更加优异的节能性能。
                3. 卓越的可靠性
                奔驰v12发动机采用了多项先进的技术手段，如电子控制系统、智能诊断系统和高强度材料等，使得其具有卓越的可靠性和耐久性。同时，奔驰还为该发动机提供了全面的保修服务，用户可放心使用。
                <!-- <p>奔驰v12发动机是一款采用V型12缸结构的高性能发动机，它拥有强大的动力输出和卓越的驾驶体验。其主要技术特点如下：</p>
                <h6>1. 强大的动力输出</h6>
                <p>奔驰v12发动机采用双涡轮增压技术，最大输出功率可达630马力，最大扭矩可达1000牛·米，动力十分强劲。同时，该发动机还采用了可变气门正时和可变气门升程技术，使得发动机在低速和高速工况下均能保持出色的动力输出。</p>
                <h6>2. 高效的燃油经济性</h6>
                <p>奔驰v12发动机采用了直喷技术和启停系统，使得其燃油经济性得到了极大的提升。根据实测数据，该发动机的综合油耗仅为11.9升/100公里，相比其他同级别发动机具有更加优异的节能性能。</p>
                <h6>3. 卓越的可靠性</h6>
                <p>奔驰v12发动机采用了多项先进的技术手段，如电子控制系统、智能诊断系统和高强度材料等，使得其具有卓越的可靠性和耐久性。同时，奔驰还为该发动机提供了全面的保修服务，用户可放心使用。</p> -->
            </div>
        </div>

    </div>
    <QRCodeMask v-if="HomeContent.Default.QRType.value"></QRCodeMask>

    <!-- 信息标签 -->
    <div v-if="isShowing">
        <labels v-for=" (item, index) in LabelComponent.Default.labelDataList.value" :Name="item.Name"
            :RecordID="state.RecordID" :Keys="item.InstanceId" :Length="item.Length"
            :ViewportPointX="item.ViewportPointX + '%'" :ViewportPointY="item.ViewportPointY + '%'"
            :Direction="item.Direction" :key="item.InstanceId" @click="Select(item.InstanceId)">
        </labels>
    </div>
    <audio autoplay src="/assets/合并V12.MP3"></audio>
</template>

<script setup lang="ts">
import labels from '../labelBox/label.vue'
import Hdr from '../Head/index.vue'
import VideoList from '../VideoList/index.vue'
import { useRouter } from 'vue-router'
import { onMounted, ref, nextTick, reactive } from 'vue';
import QRCodeMask from '../QRCodeMask/index.vue'
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import MessageCode from '../MessageCode';
import ObjectControllerCode from '../ObjectControllerCode';
import OrbitCameraComponent from '../OrbitCameraComponent';
import GameObjectComponent from '@runtime/UnityEngineBridge/GameObjectComponent';
import HomeContent from '../HomeContent';
import LabelComponent from '@runtime/UnityEngineBridge/LabelComponent';
import HighlighterComponent from '@runtime/UnityEngineBridge/HighlighterComponent';
import { ElMessage, imageEmits } from 'element-plus';
const router = useRouter()
const STOP = ref(true)
const ValType = ref(true)
const isShowing = ref(true)
const isShowIntroduce = ref(true)
const state = reactive({
    current: 'P',
    ModelStatus: 1,
    RecordID: -1,
    EAI: false,
    selectedType: 0,
});
const imaVal = ref('未启动')
// 高亮点击
async function Select(val: number) {
    if (val == state.RecordID) {
        // 清除高亮
        await HighlighterComponent.Default.ClearAsync();
        state.RecordID = -1
    } else if (val != state.RecordID) {
        // 清除高亮
        await HighlighterComponent.Default.ClearAsync();
        // console.log(val, '获得的id');
        let id: Array<number> = [val]
        await HighlighterComponent.Default.UpdateAsync(id);
        state.RecordID = val
    }
}
function OPQR() {
    HomeContent.Default.QRType.value = true
}
function VLQR() {
    HomeContent.Default.ModuleType.value = 1
    HomeContent.Default.VideoList.value = true
}
async function SwitchBtn() {
    isShowing.value = false
    isShowIntroduce.value = false
    if (state.ModelStatus == 1) {
        //隐藏模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value, false);
        // 显示当前选项模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[3], true);
        let newArr: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.VIEW_DATA_CONFIG, `5`))
        console.log(JSON.parse(newArr.Content).Result);
        let ValData = JSON.parse(newArr.Content).Result
        await OrbitCameraComponent.Default.UpdateV2Async(ValData.TargetContainer, ValData.Horizontal, ValData.Vertical, ValData.Distance, ValData.MinDistance, ValData.MaxDistance, ValData.VerticalAngleMax, ValData.VerticalAngleMin, 1, 1, 1, ValData.HorizontalAngleMax, ValData.HorizontalAngleMin);
        state.ModelStatus = 2
    } else if (state.ModelStatus == 2) {
        //隐藏模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value, false);
        // 显示当前选项模型
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[1], true);
        await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[2], true);
        let newArr: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.VIEW_DATA_CONFIG, `1`))
        console.log(JSON.parse(newArr.Content).Result);
        let ValData = JSON.parse(newArr.Content).Result
        await OrbitCameraComponent.Default.UpdateV2Async(ValData.TargetContainer, ValData.Horizontal, ValData.Vertical, ValData.Distance, ValData.MinDistance, ValData.MaxDistance, ValData.VerticalAngleMax, ValData.VerticalAngleMin, 1, 1, 1, ValData.HorizontalAngleMax, ValData.HorizontalAngleMin);
        state.ModelStatus = 1
    }
}
function isShow() {
    isShowing.value = !isShowing.value
    if (isShowing.value !== isShowIntroduce.value) {
        isShowIntroduce.value = isShowing.value
    }
}
function closeIntroduce() {
    isShowIntroduce.value = false
}
const value1 = ref(0)
const value2 = ref(0)
function val1(val: any) {
    console.log(val, 111);
    let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.BRAKE_PEDAL, Content: `${val}` }
    MessageMethod(newArr)
}
function val2(val: any) {
    console.log(val);
    let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.ACCELERATOR_PEDAL, Content: `${val}` }
    MessageMethod(newArr)
}
async function ret() {
    HomeContent.Default.engine.value = false
    HomeContent.Default.lamplight.value = false
    HomeContent.Default.bigBox.value = true
    WebSocketComponent.Default.PostMessage(new ClientMessage.DiagnosisAdapterMessage(MessageCode.Default.MsgCodesList.SYSTEM_RESET))
    //隐藏模型
    await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[1], false);
    await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[3], false);
    await GameObjectComponent.Default.HideAsync(HomeContent.Default.ModelID.value[2]);

    //重置
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.SYSTEM_RESET))
    HomeContent.Default.VideoList.value = false
    router.push('/')
    await GameObjectComponent.Default.ShowHideAsync(HomeContent.Default.ModelID.value[2], true);
}
function DZZC() {
    let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.PARKING, Content: '' }
    MessageMethod(newArr)
}

function YJQD() {
    if (ValType.value) {
        ValType.value = false
        STOP.value = !STOP.value
        // 启动
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.START, Content: '' }
        MessageMethod(newArr)
        setTimeout(() => {
            ValType.value = true
        }, 1000)
    } else {
        ElMessage('请稍候重试！')
    }
}

function ArrowClick(val: string) {
    if (val == 'AP') {
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.ACCELERATOR_PEDAL, Content: '100' }
        MessageMethod(newArr)
    } else if (val == 'BP') {
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.BRAKE_PEDAL, Content: '100' }
        MessageMethod(newArr)
    }
}
function ArrowRelease(val: string) {
    if (val == 'AP') {
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.ACCELERATOR_PEDAL, Content: '0' }
        MessageMethod(newArr)
    } else if (val == 'BP') {
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.BRAKE_PEDAL, Content: '0' }
        MessageMethod(newArr)
    }
}
function SAL() {
    if (state.current == 'P') {
        state.current = 'R'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    } else if (state.current == 'R') {
        state.current = 'D'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    } else if (state.current == 'D') {
        state.current = 'N'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    } else if (state.current == 'N') {
        state.current = 'P'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    }
}
function SAR() {
    if (state.current == 'P') {
        state.current = 'N'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    } else if (state.current == 'N') {
        state.current = 'D'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    } else if (state.current == 'D') {
        state.current = 'R'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    } else if (state.current == 'R') {
        state.current = 'P'
        let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: state.current }
        MessageMethod(newArr)
    }
}
function MessageMethod(Arr: any) {
    WebSocketComponent.Default.PostMessage(new ClientMessage.DiagnosisAdapterMessage(MessageCode.Default.MsgCodesList.DISASSEMBLY_OBJECT_VEHICLE_CONTROLLER, JSON.stringify(Arr)))
}
onMounted(async () => {
    STOP.value = true
    const response: ClientMessage.LabelLoadResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.LabelLoadRequest(HomeContent.Default.ModelID.value[1]));
    // console.log(response, '模型返回值+++++++++');
    LabelComponent.Default.labelDataList.value = response.Informations
    console.log('LabelComponent.Default.labelDataList.value', LabelComponent.Default.labelDataList.value);
    let newArr: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.VIEW_DATA_CONFIG, `1`))
    console.log(JSON.parse(newArr.Content).Result);
    let ValData = JSON.parse(newArr.Content).Result
    await OrbitCameraComponent.Default.UpdateV2Async(ValData.TargetContainer, ValData.Horizontal, ValData.Vertical, ValData.Distance, ValData.MinDistance, ValData.MaxDistance, ValData.VerticalAngleMax, ValData.VerticalAngleMin, 1, 1, 1, ValData.HorizontalAngleMax, ValData.HorizontalAngleMin);
})
</script>

<style scoped>
.introduce {
    background-image: url('/public/images/Benz600/text_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 310px;
    height: 430px;
    position: absolute;
    top: 200px;
    /* left: 200px; */
    left: 1450px;
    padding: 0 20px;
}

.close {
    background-image: url('/public/images/Benz600/ic_close2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 13px;
    left: 277px;
    width: 20px;
    height: 20px;
}

.title {
    position: absolute;
    top: 34px;
    left: 46px;
    font-size: 18px;
}

.content {
    /* overflow-y: auto; */
    color: #fff;
    height: 280px;
    margin-top: 80px;
}

/*高宽分别对应横竖滚动条的尺寸*/
/*滚动条整体样式*/
/* .content::-webkit-scrollbar {
    width: 6px;
    height: 1px;
} */

/*滚动条里面小方块*/
/* .content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #45B5FF;
} */

/*滚动条里面轨道*/
/* .content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
} */

.ENGINE_wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    color: #fff;
    background: transparent;
    /* background-color: #000; */
}

.return_ico {
    width: 50px;
    position: absolute;
    left: 10px;
    top: 10px;
}

.ActionBar {
    width: 1682px;
    height: 182px;
    background-image: url('/images/Benz600/ENGINE.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 33px;
    left: 124px;
}

.fb_l {
    width: 89px;
    height: 97px;
    background-image: url('/images/Benz600/btn_play.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 24px;
    top: 35px;
}

.fb_l:hover {
    transform: scale(1.05);
    transition: all 0.1s linear;
}

.fb_r {
    width: 119px;
    height: 132px;
    background-image: url('/images/Benz600/btn_QRcode.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 17px;
    right: 34px;
}

.fb_r:hover {
    transform: scale(1.05);
    transition: all 0.1s linear;
}

.EP {
    width: 52px;
    height: 42px;
    background-image: url('/images/Benz600/ic_电子驻车.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 267px;
    top: 56px;
}

.GP {
    width: 236px;
    height: 98px;
    background-image: url('/images/Benz600/档位_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 437px;
    top: 24px;
}

.BS {
    width: 128px;
    height: 128px;
    background-image: url('/images/Benz600/ic_一键启动.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 772px;
    top: 9px;
}

.ST {
    width: 128px;
    height: 128px;
    /* background-image: url('/images/Benz600/ic_未启动.png'); */
    /* background-repeat: no-repeat; */
    /* background-size: 100% 100%; */
    position: absolute;
    left: 772px;
    top: 9px;
}


.AP {
    width: 94px;
    height: 94px;
    background-image: url('/images/Benz600/油门_normal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 1003px;
    top: 25px;
}

.BP {
    width: 94px;
    height: 94px;
    background-image: url('/images/Benz600/刹车_normal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 204px;
    top: 25px;
}

.SAL {
    width: 44px;
    height: 44px;
    background-image: url('/images/Benz600/ic_arrow_yellow_L.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 459px;
    top: 53px;
}

.SAR {
    width: 44px;
    height: 44px;
    background-image: url('/images/Benz600/ic_arrow_yellow_R.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 616px;
    top: 53px;
}

.GPImg {
    width: 83px;
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%, 0);
}

.buttonText {
    font-size: 18px;
    font-weight: 400;
    color: #ACC1D4;
    position: absolute;
}

.t1 {
    left: 258px;
    bottom: 32px;
}

.t2 {
    left: 537px;
    bottom: 32px;
}

.t3 {
    left: 800px;
    bottom: 1px;
}

.t4 {
    left: 1014px;
    bottom: 32px;
}

.t5 {
    left: 214px;
    bottom: 32px;
}

.numericalValue {
    width: 310px;
    position: absolute;
    left: 351px;
    top: 65px;
}

.numericalValue2 {
    width: 310px;
    position: absolute;
    left: 1130px;
    top: 65px;
}

:deep().el-slider__runway {
    height: 18px !important;
}

:deep().el-slider__bar {
    height: 18px !important;
    background-color: #16D0FF !important;
}

:deep().el-slider__button {
    height: 30px;
    width: 30px !important;
}

:deep().el-slider__button-wrapper {
    top: -9px;
}

.swBtn {
    color: #ACC1D4;
    position: absolute;
    font-size: 20px;
    left: 923px;
    bottom: 60px;
    border: 1px solid #ACC1D4;
    border-radius: 6px;
    padding: 2px 8px;
}

.isShowBtn {
    color: #ACC1D4;
    position: absolute;
    font-size: 20px;
    left: 923px;
    bottom: 114px;
    border: 1px solid #ACC1D4;
    border-radius: 6px;
    padding: 2px 8px;
}

::v-deep .el-form-item__label {
    color: #fff !important;
}
</style>